<template>
  <transition name="el-zoom-in-center">
    <div class="jsbos-preview-main">
      <div class="jsbos-common-page-header">
        <el-page-header @back="goBack" :content="'补考跟踪'" />
        <!-- <div class="options">
          <el-button @click="goBack">取 消</el-button>
        </div> -->
      </div>

      <el-row
        type="flex"
        :gutter="15"
        class="row-bg"
        justify="space-between"
        :loading="loading"
      >
        <el-col :span="12" class="page-container-content">
          <h5 data-v-b280ca9a="">{{ dataForm.fullName }}</h5>
          <div class="other-info" data-v-b280ca9a="">
            <span data-v-b280ca9a="">{{
              dataForm.startDatetime + " 至 " + dataForm.endDatetime
            }}</span>
          </div>
        </el-col>
        <el-col :span="12" class="page-container-extraContent">
          <div class="page-container-extra" data-v-b280ca9a="">
            <div class="item" data-v-b280ca9a="">
              <div class="ant-statistic" data-v-b280ca9a="">
                <div class="ant-statistic-title">考试时间</div>
                <div class="ant-statistic-content">
                  <!----><span class="ant-statistic-content-value"
                    ><span class="ant-statistic-content-value-int">{{
                      dataForm.examLength
                    }}</span></span
                  ><span class="ant-statistic-content-suffix">分钟</span>
                </div>
              </div>
            </div>
            <div class="item" data-v-b280ca9a="">
              <div class="ant-statistic" data-v-b280ca9a="">
                <div class="ant-statistic-title">试卷总分</div>
                <div class="ant-statistic-content">
                  <!----><span class="ant-statistic-content-value"
                    ><span class="ant-statistic-content-value-int">{{
                      dataForm.score
                    }}</span></span
                  ><span class="ant-statistic-content-suffix">分</span>
                </div>
              </div>
            </div>
            <div class="item" data-v-b280ca9a="">
              <div class="ant-statistic" data-v-b280ca9a="">
                <div class="ant-statistic-title">及格分数</div>
                <div class="ant-statistic-content">
                  <!----><span class="ant-statistic-content-value"
                    ><span class="ant-statistic-content-value-int">{{
                      dataForm.passLine
                    }}</span></span
                  ><span class="ant-statistic-content-suffix">分</span>
                </div>
              </div>
            </div>
            <div class="item" data-v-b280ca9a="">
              <div class="ant-statistic" data-v-b280ca9a="">
                <div class="ant-statistic-title">通过/指派人数</div>
                <div class="ant-statistic-content">
                  <!----><span class="ant-statistic-content-value"
                    ><span class="ant-statistic-content-value-int">{{
                      dataForm.userCompleteCount
                    }}</span></span
                  ><span class="ant-statistic-content-suffix"
                    >/{{ dataForm.userCount }}</span
                  >
                </div>
              </div>
            </div>
            <div class="item" data-v-b280ca9a="">
              <div class="ant-statistic" data-v-b280ca9a="">
                <div class="ant-statistic-title">通过率</div>
                <div class="ant-statistic-content">
                  <!----><span class="ant-statistic-content-value"
                    ><span class="ant-statistic-content-value-int">{{
                      (dataForm.userCompleteCount / dataForm.userCount).toFixed(
                        2
                      )
                    }}</span></span
                  ><span class="ant-statistic-content-suffix">%</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <div class="jsbos-common-layout">
        <div class="jsbos-common-layout-center">
          <!-- 数据列表 -->
          <div class="jsbos-common-layout-main jsbos-flex-main">
            <!-- 操作 -->
            <div class="jsbos-common-head">
              <div>
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  @click="addOrUpdateHandle()"
                  >安排补考</el-button
                >
              </div>
              <div class="jsbos-common-head-right">
                <el-tooltip
                  effect="dark"
                  :content="$t('common.refresh')"
                  placement="top"
                >
                  <el-link
                    icon="icon-ym icon-ym-Refresh jsbos-common-head-icon"
                    :underline="false"
                    @click="initData()"
                  />
                </el-tooltip>
              </div>
            </div>
            <!-- 表格 -->
            <jsbos-table
              v-loading="listLoading"
              :data="list"
              ref="jsbosTableRef"
              style="margin-left: 5px"
              @sort-change="sortChange"
            >
              <el-table-column
                prop="fullName"
                label="补考名称"
                width="0"
                align="left"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                prop="examPaperId"
                label="试卷名称"
                width="0"
                align="left"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                prop="startDatetime"
                label="开始时间"
                width="150"
                align="left"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                prop="endDatetime"
                label="截至时间"
                width="150"
                align="left"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                prop="creatorUserId"
                label="创建用户"
                width="100"
                align="left"
                :show-overflow-tooltip="true"
              />
              <el-table-column
                prop="creatorTime"
                label="创建时间"
                width="150"
                align="left"
                :show-overflow-tooltip="true"
              />
              <el-table-column fixed="right" label="操作" width="130">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click.native="addOrUpdateHandle(scope.row.id)"
                    >编辑
                  </el-button>
                  <el-button type="text" @click.native="handleDel(scope.row.id)"
                    >删除
                  </el-button>
                  <el-button type="text" @click.native="createQrcode(scope.row)"
                    >二维码
                  </el-button>
                </template>
              </el-table-column>
            </jsbos-table>
            <pagination
              :total="total"
              :page.sync="listQuery.currentPage"
              :limit.sync="listQuery.pageSize"
              @pagination="initData"
            />
          </div>
        </div>
      </div>
      <ExamMakeupForm
        v-if="formVisible"
        ref="ExamMakeupForm"
        @refresh="refresh"
      />

      <el-dialog
        :title="qrDialogName"
        :visible.sync="qrcodeVisible"
        :close-on-click-modal="false"
        class="jsbos-dialog jsbos-dialog_center"
        lock-scroll
        width="600px"
        :append-to-body="true"
        :modal-append-to-body="false"
      >
        <div class="qr_create">
          <div
            :id="'qrCode'"
            :ref="'qrCode'"
            :data-code="qrCode"
            style="
              width: 300px;
              height: 300px;
              border: 1px solid #eee;
              margin-bottom: 24px;
              margin-left: 24px;
            "
          ></div>
          <!-- 作为下载二维码使用 -->
          <a ref="downLoadImgUrl" style="display: none"></a>
        </div>
        <div class="qr_create_httpUrl">链接地址：{{ httpCourseMUrl }}</div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="qrcodeVisible = false">取 消</el-button>
          <el-button type="primary" @click="downQrcodeImg"
            >下载二维码</el-button
          >
        </span>
      </el-dialog>
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import QRCode from "qrcodejs2";
import { getDataDetail, getList, Delete } from "@/views/exam/api/manager";
import ExamMakeupForm from "./ExamMakeupForm";

export default {
  components: { ExamMakeupForm },
  props: [],
  name: "ExamMakeup",
  data() {
    return {
      visible: false,
      loading: false,
      dataForm: {
        id: undefined,
        parentId: "",
        fullName: "",
        examPaperId: "",
        categoryId: undefined,
        startDatetime: "",
        endDatetime: "",
        examLength: undefined,
        passLine: undefined,
        score: undefined,
        enabledMark: undefined,
        userCount: undefined,
        userCompleteCount: undefined,
      },
      query: {
        fullName: undefined,
        enabledMark: undefined,
        startDatetime: undefined,
        creatorUserId: undefined,
      },
      list: [],
      listLoading: true,
      total: 0,
      listQuery: {
        dataType: "2", // 补考
        parentId: undefined,
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      },
      formVisible: false,

      qrcodeVisible: false,
      qrCode: "",
      qrDialogName: "",
      qrcodeImgUrl: "",
      sysAddress: "",
      httpCourseMUrl: "",
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    goBack() {
      this.$nextTick(() => {
        this.$emit("refresh");
      });
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.listQuery.parentId = this.dataForm.id;
          this.loading = true;
          getDataDetail(this.dataForm.id).then((res) => {
            this.dataInfo(res.data);
            this.loading = false;
            this.initData();
          });
        }
      });
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll;
      this.dataForm = _dataAll;
    },
    initData() {
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
        menuId: this.menuId,
      };
      getList(_query).then((res) => {
        var _list = [];
        for (let i = 0; i < res.data.list.length; i++) {
          let _data = res.data.list[i];
          _list.push(_data);
        }
        this.list = _list;
        this.total = res.data.pagination.total;

        this.listLoading = false;
      });
    },
    addOrUpdateHandle(id) {
      this.formVisible = true;
      this.$nextTick(() => {
        this.$refs.ExamMakeupForm.init(id, this.dataForm);
      });
    },
    handleDel(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        type: "warning",
      })
        .then(() => {
          Delete(id).then((res) => {
            this.$message({
              type: "success",
              message: res.msg,
              onClose: () => {
                this.initData();
              },
            });
          });
        })
        .catch(() => {});
    },
    search() {
      this.initData();
    },
    refresh(isInitData) {
      this.formVisible = false;
      if (isInitData) this.initData();
    },
    resetListQuery() {
      this.listQuery = {
        dataType: "2", // 补考
        parentId: this.dataForm.id,
        currentPage: 1,
        pageSize: 20,
        sort: "asc",
        sidx: "sortCode",
      };
    },
    resetQuery() {
      for (let key in this.query) {
        this.query[key] = undefined;
      }
    },
    reset() {
      this.resetListQuery();
      this.resetQuery();
      this.initData();
    },
    sortChange({ column, prop, order }) {
      this.listQuery.sort = order == "ascending" ? "asc" : "desc";
      this.listQuery.sidx = !order ? "" : prop;
      this.initData();
    },

    createQrcode(row) {
      this.qrcodeVisible = true;
      if (!row) {
        return;
      }
      this.qrDialogName = "【" + row.fullName + "】课程二维码";
      const baseUrl = this.sysAddress.substring(
        0,
        this.sysAddress.indexOf("#")
      );
      this.httpCourseMUrl = baseUrl + "/#/pages/examWeb/index?id=" + row.id;
      this.$nextTick(() => {
        const qrCodeRef = this.$refs["qrCode"];
        if (qrCodeRef) {
          qrCodeRef.innerHTML = ""; // 清空二维码容器
          new QRCode(qrCodeRef, {
            width: 300,
            height: 300,
            text: this.httpCourseMUrl,
            correctLevel: QRCode.CorrectLevel.M,
          });
          let qrcodeCanvas =
            this.$refs.qrCode.getElementsByTagName("canvas")[0];
          this.qrcodeImgUrl = qrcodeCanvas.toDataURL("image/png"); // 作为下载图片资源
        } else {
          console.error("QRCode ref is not defined");
        }
      });
    },
    // 下载二维码
    downQrcodeImg() {
      let downloadLink = this.$refs.downLoadImgUrl;
      downloadLink.setAttribute("href", this.qrcodeImgUrl);
      downloadLink.setAttribute(
        "download",
        `${this.qrDialogName}_${new Date().getTime()}.png`
      );
      downloadLink.click();
      URL.revokeObjectURL(downloadLink.href);
      this.qrcodeVisible = false;
    },
  },
};
</script>
<style>
.row-bg {
  padding: 16px 16px;
  background-color: #ffffff;
}

.page-container-content h5 {
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  min-height: 25px;
  word-wrap: break-word;
  line-height: 25px;
  font-weight: 400;
  margin: 0;
}

.page-container-content .other-info {
  padding-top: 5px;
}

.page-container-content .other-info span {
  padding-right: 15px;
}

.page-container-content .conditions {
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.page-container-content .conditions .label-box {
  display: flex;
  flex-wrap: wrap;
}

.page-container-content .conditions .label-box .label-item {
  margin-left: 10px;
  line-height: 21px;
}

page-container-extraContent {
  min-width: 242px;
  text-align: right;
}

.page-container-extraContent .page-container-extra {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.page-container-extraContent .page-container-extra .item {
  margin-left: 16px;
}

.page-container-extraContent .page-container-extra .item .ant-statistic {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
}

.page-container-extraContent
  .page-container-extra
  .item[data-v-b280ca9a]
  .ant-statistic-title {
  margin-bottom: 0;
  font-size: 14px;
  line-height: 25px;
}

.page-container-extraContent
  .page-container-extra
  .item[data-v-b280ca9a]
  .ant-statistic-content {
  font-size: 18px;
  line-height: 22px;
  height: 22px;
  margin-top: 6px;
}

.page-container-extraContent
  .page-container-extra
  .item[data-v-b280ca9a]
  .ant-statistic-content-suffix {
  font-size: 14px;
  line-height: 20px;
  color: #666;
}

.page-container-content
  .el-checkbox__input.is-disabled.is-checked
  .el-checkbox__inner {
  background-color: #409eff;
  border-color: #409eff;
}

.page-container-content
  .el-checkbox__input.is-disabled.is-checked
  .el-checkbox__inner::after {
  color: #ffffff;
}

.page-container-content
  .el-checkbox__input.is-disabled
  + span.el-checkbox__label {
  color: #606266;
  cursor: not-allowed;
}
</style>
